<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 合同列表 -->
    <van-cell
      v-for="(item, index) in contractList"
      :key="index"
      :title="item.number"
      is-link
      @click="handleOperatorClick(item)"
    >
      <template #right>
        <span style="color: #f97c00; font-size: 14px">{{ item.operator }}</span>
        <van-icon name="arrow" color="#f97c00" />
      </template>

      <!-- 自定义内容区域 -->
      <template #default>
        <div class="contract-info">
          <div class="info-row">
            <span class="label">项目金额：</span>
            <span class="value">{{ item.amount }}万</span>
          </div>
          <div class="info-row">
            <span class="label">剩余本金：</span>
            <span class="value">{{ item.balance }}万</span>
          </div>
        </div>
      </template>
    </van-cell>

    <!-- 展开更多按钮 -->
    <van-button
      v-if="!finished"
      class="expand-btn"
      type="default"
      plain
      @click="loadMore"
    >
      展开更多
    </van-button>
  </van-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 模拟数据
const contractList = ref([
  {
    number: '2025PACF000980-F-01',
    amount: '37.23',
    balance: '37.23',
    operator: '何晨'
  },
  {
    number: '2025PACF000980-F-01',
    amount: '37.23',
    balance: '37.23',
    operator: '何晨'
  },
  {
    number: '2025PACF000980-F-01',
    amount: '37.23',
    balance: '37.23',
    operator: '何晨'
  }
])

// 加载状态
const loading = ref(false)
const finished = ref(false)

// 模拟加载更多
const onLoad = () => {
  // eslint-disable-next-line no-undef
  setTimeout(() => {
    loading.value = false
    if (contractList.value.length >= 10) {
      finished.value = true
    }
  }, 1000)
}

const loadMore = () => {
  console.log('展开更多')
}

const handleOperatorClick = (item: unknown) => {
  console.log('点击了：', item.operator)
  // 可以跳转到详情页
  // router.push(`/detail/${item.number}`)
}
</script>

<style scoped lang="scss">
.contract-info {
  margin-top: 8px;
  font-size: 14px;

  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;

    .label {
      color: #666;
      font-size: 14px;
    }

    .value {
      color: #333;
      font-size: 14px;
      margin-left: 8px;
    }
  }
}

.expand-btn {
  width: 100%;
  margin-top: 16px;
}
</style>
